<template>
	<!--事管列表 -->
	<div class="content">
		<h2 style="margin-bottom: 10px">事管列表</h2>
		<!-- 表格table -->
		<div class="table">
			<el-table :data="venuesDetailsList" ref="multipleTable" stripe>
				<el-table-column type="selection" width="55"></el-table-column>
				<el-table-column prop="thingName" label="常规事物" align="center"></el-table-column>
				<el-table-column prop="thingUsername" label="责任人" align="center"></el-table-column>
				<el-table-column fixed="right" label="操作" width="200">
					<template slot-scope="scope">
						<!-- @click="handleClickCheck(scope.$index, scope.row)"  -->
						<el-button :plain="true" @click="dialogFormVisible = true" type="text" size="small">
							查看
						</el-button>
						<el-button
							:plain="true"
							@click="handleClickModify(scope.$index, scope.row)"
							type="text"
							size="small"
						>
							修改
						</el-button>
						<el-button
							:plain="true"
							@click="handleClickRemove(scope.$index, scope.row)"
							type="text"
							size="small"
						>
							删除
						</el-button>
						<!-- 弹出框 -->
						<el-dialog title="常规事物与责任人" :visible.sync="dialogFormVisible" append-to-body>
							<el-form :model="form">
								<el-form-item label="常规事物：" :label-width="formLabelWidth">
									{{form.name}}
								</el-form-item>
								<el-form-item label="责任人：" :label-width="formLabelWidth">
									{{form.name}}
								</el-form-item>
								<el-form-item label="状态：" :label-width="formLabelWidth">
									{{form.name}}
								</el-form-item>
							</el-form>
							<div slot="footer" class="dialog-footer">
								<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
							</div>
						</el-dialog>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<!-- 分页pagination -->
		<div class="pagination">
			<el-pagination
				small
				background
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="page.currentPage"
				:page-sizes="[10, 20, 30, 40]"
				:page-size="page.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="page.total"
			></el-pagination>
		</div>
	</div>
</template>

<script>
import { thingsInquire, thingsRemove } from '@/APIs/index/index'
// import { thingsInquire, thingsRemove, thingsUpdate } from '@/APIs/index/index'
export default {
	inject: ['reload'], // 注入依赖
	name: 'CheckAgent',
	data() {
		return {
			tableData: [],
			thingsList: [],
			page: {
				currentPage: 1,
				pageSize: 10,
				total: 0
			},
			venuesDetailsList: [],
			dialogFormVisible: false,
			form: {
				thingName: '',
				thingUsername: '',
				thingStatus: '',
				delivery: false,
			},
			formLabelWidth: '120px'
		}
	},
	created() {},
	mounted() {
		this.checkAgent()
	},
	methods: {
		// 点击查看
		async handleClickCheck(index, row) {
			this.dialogFormVisible = true
			console.log('查看', row)
			this.form.thingName = row.thingName
			this.form.thingUsername = row.thingUsername
			this.form.thingStatus =row.thingStatus
		},
		// 点击修改
		async handleClickModify(index, row) {
			console.log('修改', row)
			// this.$message.error({
			// 	message: '请求已拒绝'
			// })
			// const taskId = row.taskId
			// const agree = 'false'
			// console.log(taskId, agree)
			// const data = await appoinmentsTasksComplete({
			// 	taskId,
			// 	agree
			// })
			// console.log(data)
			this.$router.push({
				path: '/ThingsManagement1',
				query: {
					createTime: row.createTime,
					deleted: row.deleted,
					thingId: row.thingId,
					thingName: row.thingName,
					thingStatus: row.thingStatus,
					thingUsername: row.thingUsername,
					updateTime: row.updateTime,
					userId: row.userId
				}
			})
		},
		// 点击删除
		handleClickRemove(index, row) {
			console.log('删除', row)
			this.$confirm('确认删除？')
				.then(async confirm => {
					console.log(confirm)
					const thingIds = row.thingId
					const data = await thingsRemove({ thingIds })
					console.log(data)
					this.$message({
						message: '删除成功',
						type: 'success'
					})
					setTimeout(function () {
						history.go(0) // 刷新当前页面
					}, 1000) // 延时一秒刷新页面
				})
				.catch(() => {
					this.$message({
						message: '取消删除',
						type: 'success'
					})
				})
		},
		// 渲染数据到表格
		async checkAgent() {
			const { currentPage: pageNum, pageSize } = this.page
			const {
				data: { list = [], total }
			} = await thingsInquire({
				pageNum,
				pageSize
			})
			this.tableData = list.map(item => ({ ...item, visible: false }))
			this.venuesDetailsList = list
			this.page.total = total
			console.log(list)
		},
		// 分页-点击下一页
		async handleCurrentChange(val) {
			this.page.currentPage = val
			const { currentPage: pageNum, pageSize } = this.page
			const {
				data: { list = [], total }
			} = await thingsInquire({
				pageNum,
				pageSize
			})
			this.tableData = list.map(item => ({ ...item, visible: false }))
			this.venuesDetailsList = list
			this.page.total = total
			console.log(list, total)
		},
		// 分页-点击状态
		handleSizeChange() {}
	}
}
</script>

<style>
.table {
	margin-bottom: 15px;
}
</style>